<template>
	<view>
		<form-item label="交易地址">
			<input disabled placeholder="请选择交易地址" :value="state.address" @click="onOpen" />
		</form-item>

		<form-item label="交易描述">
			<input v-model="state.message" placeholder="请输入交易描述" />
		</form-item>

		<form-item label="交易类型">
			<radio-group @change="onTypeChange">
				<label>
					<radio value="buy" :checked="state.type === 'buy'" /><text>买</text>
				</label>
				<label>
					<radio value="sell" :checked="state.type === 'sell'" /><text>卖</text>
				</label>
			</radio-group>
		</form-item>

		<form-item label="联系方式">
			<input v-model="state.contact" placeholder="请输入联系方式" maxlength="11" />
		</form-item>

		<view class="btn-group">
			<button class="btn" type="default" @click="onReset">重置</button>
			<button class="btn" type="primary" @click="onConfirm">确认</button>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { reactive, watch, getCurrentInstance } from 'vue';
	import { addTrade, type Trade } from '../../api';

	// 该 getCurrentInstance 需要在 setup 顶层调用
	const ins = getCurrentInstance()

	// 默认数据
	// 	Omit<Trade, "id"> 排除 Trade 类型中的 id 属性之后，组装成一个新类型
	const defaultState : Omit<Trade, "id"> = {
		openid: "",
		address: "",
		message: "",
		contact: "",
		lat: 0,
		lng: 0,
		type: "buy"
	}


	// 定义表单数据
	const state = reactive({ ...defaultState })

	/**
	 * 选择交易地址
	 */
	async function onOpen() {
		const result = await uni.chooseLocation()
		// 赋值
		state.address = result.address
		state.lat = result.latitude
		state.lng = result.longitude
	}

	/**
	 * 交易类型选择
	 */
	function onTypeChange(event : { detail : { value : "buy" | "sell" } }) {
		// 将 event.detail.value 赋值给 state.type
		state.type = event.detail.value
	}

	/**
	 * 重置
	 */
	function onReset() {
		// console.log('defaultState', defaultState)
		// 不能直接对 reactive 数据做赋值，会丢失响应式
		// state = defaultState
		Object.assign(state, defaultState)
	}

	/**
	 * 确认发布
	 */
	function onConfirm() {
		// 1. 做一个简单的表单校验
		if (!state.address) {
			return uni.showToast({ icon: "none", title: '请选择交易地址' })
		}

		if (!state.message) {
			return uni.showToast({ icon: "none", title: '请输入交易描述' })
		}

		if (!state.contact) {
			return uni.showToast({ icon: "none", title: '请输入联系方式' })
		}

		// 2. 调用接口
		addTrade(state).then(() => {
			uni.showToast({
				icon: 'success',
				title: "新增成功",
			})

			setTimeout(() => {
				// 触发页面通道对象
				// 		1. this.getOpenerEventChannel 
				// 			当前代码是 setup 组合式API 没有 this，可以使用 getCurrentInstance 来获取实例
				const eventChannel = (ins.proxy as any).getOpenerEventChannel()
				eventChannel.emit('success')

				// 后退
				// 		有时，当前页是直接分享出去的，没有上一个页面，后退会报错
				// 		这时，可以处理当没有上一个页面时，就回到首页。
				uni.navigateBack().catch(() => {
					console.log('navigateBack catch')
					uni.reLaunch({
						url: "/pages/index/index"
					})
				})
			}, 1500)

		})
	}


	watch(() => state.type, (newVal) => {
		console.log('state.type', newVal)
	})
</script>

<style lang="scss">
	.btn-group {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;

		.btn {
			margin: 0 20rpx;
		}
	}
</style>